<template>
  <div>
    <div v-if="!showEdit" class="container">
      <div class="header">
        <div class="title" style="font-size: 18px">采集器信息列表</div>
        <el-button style="margin-left: 10px" @click.prevent="addCollector" type="primary" plain size="medium"
          >添加采集器</el-button
        >
        <div style="margin-left: 10px">
          <lin-search @query="onQueryChange" ref="searchKeyword" />
        </div>
        <div style="margin-left: 10px">
          <!-- <el-date-picker
              v-model="value"
              @change="selectTime"
              type="datetimerange"
              start-placeholder="开始采集日期"
              end-placeholder="结束采集日期"
              :default-time="['12:00:00']">
            </el-date-picker> -->
          <el-date-picker
            v-model="value1"
            @change="selectTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始购买日期"
            end-placeholder="结束购买日期"
            :picker-options="pickerOptions1"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 10px">
          <el-date-picker
            v-model="value2"
            @change="selectTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始启用日期"
            end-placeholder="结束启用日期"
            :picker-options="pickerOptions2"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="header">
        <div class="title">采集器:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div class="title">状态:</div>
        <el-input
          clearable
          placeholder="输入状态"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.collector_state"
          style="width: 12%"
        ></el-input>
        <div class="title">分组:</div>
        <el-input
          clearable
          placeholder="输入分组编号"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.group_id"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 16px">
          <el-button @click.prevent="queryEdit()" type="success" plain>查询</el-button>
        </div>
        <div style="margin-left: 8px">
          <el-button @click.prevent="ResetEdit()" type="warning" plain>重置</el-button>
        </div>
        <div style="margin-left: 8px">
          <el-button @click.prevent="plusEdit()" icon="el-icon-plus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value1">
        <div class="title">采集器:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div class="title">状态:</div>
        <el-input
          clearable
          placeholder="输入状态"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.collector_state"
          style="width: 12%"
        ></el-input>
        <div class="title">分组:</div>
        <el-input
          clearable
          placeholder="输入分组编号"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.group_id"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(1)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value2">
        <div class="title">采集器:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div class="title">状态:</div>
        <el-input
          clearable
          placeholder="输入状态"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.collector_state"
          style="width: 12%"
        ></el-input>
        <div class="title">分组:</div>
        <el-input
          clearable
          placeholder="输入分组编号"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.group_id"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(2)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value3">
        <div class="title">采集器:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div class="title">状态:</div>
        <el-input
          clearable
          placeholder="输入状态"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.collector_state"
          style="width: 12%"
        ></el-input>
        <div class="title">分组:</div>
        <el-input
          clearable
          placeholder="输入分组编号"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.group_id"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(3)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value4">
        <div class="title">采集器:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div class="title">状态:</div>
        <el-input
          clearable
          placeholder="输入状态"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.collector_state"
          style="width: 12%"
        ></el-input>
        <div class="title">分组:</div>
        <el-input
          clearable
          placeholder="输入分组编号"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.group_id"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(4)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>

      <transition name="fade">
        <div class="search" v-if="keyword">
          <p class="search-tip">
            搜索“<span class="search-keyword">{{ keyword }}</span
            >”， 找到 <span class="search-num">{{ totalNums }}</span> 条信息
          </p>
          <button class="search-back" @click="backInit">返回全部记录</button>
        </div>
      </transition>

      <el-table stripe v-loading="loading" :data="tableData">
        <el-table-column fixed="left" prop="collector_id" label="ID" width="100"></el-table-column>
        <el-table-column
          fixed="left"
          :show-overflow-tooltip="true"
          prop="collector_name"
          label="采集器名称"
          width="200"
        ></el-table-column>
        <el-table-column
          fixed="left"
          :show-overflow-tooltip="true"
          prop="dwmc"
          label="部门名称"
          width="150"
        ></el-table-column>
        <el-table-column
          fixed="left"
          :show-overflow-tooltip="true"
          prop="bgateway_name"
          label="网关名称"
          width="150"
        ></el-table-column>
        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="collector_state" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.collector_state == '正常' ? 'success' : 'danger'" disable-transitions
              >{{ scope.row.collector_state }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="left" prop="group_id" label="分组编号" width="80"></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="buy_date"
          label="购买日期"
          width="200"
          sortable
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="using_date"
          label="启用日期"
          width="200"
          sortable
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="specifications_model"
          label="规格型号"
          width="200"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="manufacturers"
          label="生产厂家"
          width="200"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="collector_type"
          label="采集器类型"
          width="200"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="collector_number"
          label="采集器序列号"
          width="200"
        ></el-table-column>
        <el-table-column prop="thigh,tlower" label="标准温度范围(℃)" width="200">
          <template slot-scope="scope"> {{ scope.row.tlower }} - {{ scope.row.thigh }} </template>
        </el-table-column>
        <el-table-column prop="hhigh,hlower" label="标准湿度范围(RH%)" width="200">
          <template slot-scope="scope"> {{ scope.row.hlower }} - {{ scope.row.hhigh }} </template>
        </el-table-column>
        <el-table-column width="150" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click.prevent="handleEdit(scope.row)" type="primary" plain size="mini">编辑</el-button>
            <el-button
              v-permission="{ permission: ['删除采集器'], type: 'disabled' }"
              @click.prevent="handleDelete(scope.row)"
              type="danger"
              size="mini"
              plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="totalNums"
        ></el-pagination>
      </div>
    </div>
    <Collector-edit v-else @editClose="editClose" :CollectorId="CollectorId" :isCreate="isCreate"></Collector-edit>
  </div>
</template>

<script>
import LinSearch from '@/component/base/search/lin-search'
import Collector from '@/model/Collector'
import CollectorEdit from './Collector-edit'

export default {
  components: { LinSearch, CollectorEdit },
  data() {
    return {
      pickerOptions1: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      CollectorId: null,
      isCreate: false,
      tableData: [],
      showEdit: false,
      totalNums: 0,
      currentPage: 1,
      pageCount: 10,
      refreshPagination: true,
      keyword: null,
      StartTime1: '',
      EndTime1: '',
      StartTime2: '',
      EndTime2: '',
      searchKeyword: '',
      plusValue: {
        value1: false,
        value2: false,
        value3: false,
        value4: false,
      }, //增加查询条件-哨值
      putData: {
        state: '已确认',
      },
      value1: null,
      value2: null,
      input: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
        collector_state: '',
        group_id: '',
      },
      input1: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
        collector_state: '',
        group_id: '',
      },
      input2: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
        collector_state: '',
        group_id: '',
      },
      input3: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
        collector_state: '',
        group_id: '',
      },
      input4: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
        collector_state: '',
        group_id: '',
      },
    }
  },
  async created() {
    this.loading = true
    this.getCollectors()
    this.loading = false
  },
  watch: {
    // 关键字搜索
    searchKeyword(newVal) {
      if (newVal) {
        this.keyword = newVal
        if (this.value1 == null) {
          this.StartTime1 = ''
          this.EndTime1 = ''
        } else {
          this.StartTime1 = this.value1[0]
          this.EndTime1 = this.value1[1]
        }
        if (this.value2 == null) {
          this.StartTime2 = ''
          this.EndTime2 = ''
        } else {
          this.StartTime2 = this.value2[0]
          this.EndTim2e = this.value2[1]
        }
        if (this.searchUser) {
          this.keyword = `${newVal}`
        }
      } else {
        this.keyword = ''
        this.$refs.searchKeyword.clear()
      }
      this.searchPage()
    },
    value(newVal) {
      this.searchPage()
    },
  },
  methods: {
    async getCollectors() {
      const page = this.currentPage - 1
      const count = this.pageCount
      const StartTime1 = this.StartTime1
      const EndTime1 = this.EndTime1
      const StartTime2 = this.StartTime2
      const EndTime2 = this.EndTime2
      const Collectors = await Collector.getCollectors({
        StartTime1,
        EndTime1,
        StartTime2,
        EndTime2,
        page,
        count,
        dwmc: this.input.dwmc,
        bgateway_name: this.input.bgateway_name,
        collector_name: this.input.collector_name,
        collector_state: this.input.collector_state,
        group_id: this.input.group_id,

        dwmc1: this.input1.dwmc,
        bgateway_name1: this.input1.bgateway_name,
        collector_name1: this.input1.collector_name,
        collector_state1: this.input1.collector_state,
        group_id1: this.input1.group_id,
        dwmc2: this.input2.dwmc,
        bgateway_name2: this.input2.bgateway_name,
        collector_name2: this.input2.collector_name,
        collector_state2: this.input2.collector_state,
        group_id2: this.input2.group_id,
        dwmc3: this.input3.dwmc,
        bgateway_name3: this.input3.bgateway_name,
        collector_name3: this.input3.collector_name,
        collector_state3: this.input3.collector_state,
        group_id3: this.input3.group_id,
        dwmc4: this.input4.dwmc,
        bgateway_name4: this.input4.bgateway_name,
        collector_name4: this.input4.collector_name,
        collector_state4: this.input4.collector_state,
        group_id4: this.input4.group_id,
      })
      this.tableData = Collectors.items
      this.totalNums = Collectors.total
      this.initImgSrcList()
    },
    async searchPage() {
      const page = this.currentPage - 1
      const count = this.pageCount
      const datas = await Collector.search({
        keyword: this.searchKeyword,
        StartTime1: this.StartTime1,
        EndTime1: this.EndTime1,
        StartTime2: this.StartTime2,
        EndTime2: this.EndTime2,
        page,
        count,
        dwmc: this.input.dwmc,
        bgateway_name: this.input.bgateway_name,
        collector_name: this.input.collector_name,
        collector_state: this.input.collector_state,
        group_id: this.input.group_id,

        dwmc1: this.input1.dwmc,
        bgateway_name1: this.input1.bgateway_name,
        collector_name1: this.input1.collector_name,
        collector_state1: this.input1.collector_state,
        group_id1: this.input1.group_id,
        dwmc2: this.input2.dwmc,
        bgateway_name2: this.input2.bgateway_name,
        collector_name2: this.input2.collector_name,
        collector_state2: this.input2.collector_state,
        group_id2: this.input2.group_id,
        dwmc3: this.input3.dwmc,
        bgateway_name3: this.input3.bgateway_name,
        collector_name3: this.input3.collector_name,
        collector_state3: this.input3.collector_state,
        group_id3: this.input3.group_id,
        dwmc4: this.input4.dwmc,
        bgateway_name4: this.input4.bgateway_name,
        collector_name4: this.input4.collector_name,
        collector_state4: this.input4.collector_state,
        group_id4: this.input4.group_id,
      })
      this.tableData = datas.items
      this.totalNums = datas.total
    },
    initImgSrcList() {
      this.tableData.forEach(item => {
        if (!item.img) {
          return
        }
        this.imgSrcList.push(item.img)
      })
    },
    selectTime() {
      if (this.value1 == null) {
        this.StartTime1 = ''
        this.EndTime1 = ''
      } else {
        this.StartTime1 = this.value1[0]
        this.EndTime1 = this.value1[1]
      }
      if (this.value2 == null) {
        this.StartTime2 = ''
        this.EndTime2 = ''
      } else {
        this.StartTime2 = this.value2[0]
        this.EndTime2 = this.value2[1]
      }
      if (this.keyword == '') {
        this.getCollectors()
      } else {
        this.searchPage()
      }
    },
    async handleCurrentChange(val) {
      this.imgSrcList = []
      this.currentPage = val
      this.loading = true
      if (this.keyword == '') {
        this.getCollectors()
      } else {
        this.searchPage()
      }
      this.loading = false
    },
    handleEdit(val) {
      this.isCreate = false
      this.CollectorId = `${val.id}`
      this.showEdit = true
    },
    handleDelete(val) {
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const res = await Collector.deleteCollector(val.id)
        if (res.code < window.MAX_SUCCESS_CODE) {
          if (this.keyword == '') {
            this.getCollectors()
          } else {
            this.searchPage()
          }
          this.$message({
            type: 'success',
            message: `${res.message}`,
          })
        }
      })
    },
    addCollector() {
      this.isCreate = true
      this.CollectorId = null
      this.showEdit = true
    },
    editClose() {
      this.showEdit = false
      if (this.keyword == '') {
        this.getCollectors()
      } else {
        this.searchPage()
      }
    },
    // eslint-disable-next-line
    cellStyleCb({ row, column, rowIndex, columnIndex }) {
      return 'long-text-hidden'
    },
    // 清空检索
    async backInit() {
      this.searchKeyword = ''
      this.keyword = ''
      this.tableData = []
      this.loading = true
      this.ResetEdit()
      this.loading = false
    },
    async onQueryChange(query) {
      this.searchKeyword = query.trim()
    },
    queryEdit() {
      if (this.keyword == '') {
        this.getCollectors()
      } else {
        this.searchPage()
      }
    },
    ResetEdit() {
      ;(this.input.dwmc = ''),
        (this.input.bgateway_name = ''),
        (this.input.collector_name = ''),
        (this.input.collector_state = ''),
        (this.input.group_id = ''),
        (this.input1.dwmc = ''),
        (this.input1.bgateway_name = ''),
        (this.input1.collector_name = ''),
        (this.input1.collector_state = ''),
        (this.input1.group_id = ''),
        (this.input2.dwmc = ''),
        (this.input2.bgateway_name = ''),
        (this.input2.collector_name = ''),
        (this.input2.collector_state = ''),
        (this.input2.group_id = ''),
        (this.input3.dwmc = ''),
        (this.input3.bgateway_name = ''),
        (this.input3.collector_name = ''),
        (this.input3.collector_state = ''),
        (this.input3.group_id = ''),
        (this.input4.dwmc = ''),
        (this.input4.bgateway_name = ''),
        (this.input4.collector_name = '')
      ;(this.input4.collector_state = ''), (this.input4.group_id = '')

      if (this.keyword == '') {
        this.getCollectors()
      } else {
        this.searchPage()
      }
    },
    plusEdit() {
      //增加查询条件--- +
      if (!this.plusValue.value1) {
        ;(this.input1.dwmc = ''),
          (this.input1.bgateway_name = ''),
          (this.input1.collector_name = ''),
          (this.input1.collector_state = ''),
          (this.input1.group_id = ''),
          (this.plusValue.value1 = true)
        return
      }
      if (!this.plusValue.value2) {
        ;(this.input2.dwmc = ''),
          (this.input2.bgateway_name = ''),
          (this.input2.collector_name = ''),
          (this.input2.collector_state = ''),
          (this.input2.group_id = ''),
          (this.plusValue.value2 = true)
        return
      }
      if (!this.plusValue.value3) {
        ;(this.input3.dwmc = ''),
          (this.input3.bgateway_name = ''),
          (this.input3.collector_name = ''),
          (this.input3.collector_state = ''),
          (this.input3.group_id = ''),
          (this.plusValue.value3 = true)
        return
      }
      if (!this.plusValue.value4) {
        ;(this.input4.dwmc = ''),
          (this.input4.bgateway_name = ''),
          (this.input4.collector_name = ''),
          (this.input4.collector_state = ''),
          (this.input4.group_id = ''),
          (this.plusValue.value4 = true)
        return
      }
    },
    minusEdit(data) {
      if (data == 1) {
        this.plusValue.value1 = false
        ;(this.input1.dwmc = ''),
          (this.input1.bgateway_name = ''),
          (this.input1.collector_name = ''),
          (this.input1.collector_state = ''),
          (this.input1.group_id = '')
      } else if (data == 2) {
        this.plusValue.value2 = false
        ;(this.input2.dwmc = ''),
          (this.input2.bgateway_name = ''),
          (this.input2.collector_name = ''),
          (this.input2.collector_state = ''),
          (this.input2.group_id = '')
      } else if (data == 3) {
        this.plusValue.value3 = false
        ;(this.input3.dwmc = ''),
          (this.input3.bgateway_name = ''),
          (this.input3.collector_name = ''),
          (this.input3.collector_state = ''),
          (this.input3.group_id = '')
      } else if (data == 4) {
        this.plusValue.value4 = false
        ;(this.input4.dwmc = ''),
          (this.input4.bgateway_name = ''),
          (this.input4.collector_name = ''),
          (this.input4.collector_state = ''),
          (this.input4.group_id = '')
      }
      if (this.keyword == '') {
        this.getCollectors()
      } else {
        this.searchPage()
      }
    },
  },
  filters: {
    onLine(val) {
      if (val === 1) {
        return '是'
      }
      return '否'
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .search {
    height: 52px;
    width: 100%;
    background: rgba(57, 99, 188, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 24px;

    .search-tip {
      margin-left: 40px;
      height: 52px;
      line-height: 52px;
      color: #354058;
      font-size: 14px;

      .search-keyword {
        color: $theme;
      }

      .search-num {
        color: #f4516c;
      }
    }

    .search-back {
      margin: 8px 20px;
      height: 32px;
      background: #f4516c;
      border: none;
      border-radius: 2px;
      color: #fff;
      padding: 0 13px;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }
}

.long-text-hidden {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
